Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

268
Vistas
React Hook "useCustomHook" se llama condicionalmente. Los React Hooks deben llamarse exactamente en el mismo orden en cada renderizado de componente

Recibí un error cuando quiero configurar si en el código de gancho personalizado

 if (dataValid) { const contactForm = useDataForm(onSubmit, modelToForm(dataValid)); }

Después de esto, recibí un error ->

 React Hook "useDataForm" is called conditionally. React Hooks must be called in the exact same order in every component render

El problema es si la declaración cuando llama a este trabajo bueno (sin si) ->

 const contactForm = useDataForm(onSubmit, modelToForm(dataValid));

No quiero cargar useDataForm (gancho personalizado) si dataValid no es válido y está lleno.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

No podemos llamar a Hooks dentro de condicionales, bucles o funciones anidadas para garantizar que los Hooks se llamen en el mismo orden cada vez que se represente un componente. El orden es importante para la forma en que React asocia las llamadas Hook con los componentes.

Recurso: https://www.benmvp.com/blog/conditional-react-hooks/#:~:text=We%20can%27t%20call%20Hooks,associates%20Hook%20calls%20with%20components .

Puede consultar este recurso, tal vez pueda ser útil.

about 4 years ago · Juan Pablo Isaza Denunciar

0

Según la documentación de React, no puede llamar a ganchos condicionalmente .

Aquí se explica en profundidad por qué.

Cuando surge la necesidad de llamar a un gancho condicionalmente, puede optar por dos soluciones:

  1. O llama a useDataForm y luego usa contactForm solo si dataValid es true
 const contactForm = useDataForm(onSubmit, modelToForm(dataValid)); if (dataValid) { // do what you need to do with dataValid } // or return <Child data={dataValid ? contactForm : otherData} />
  1. O mueve el gancho en un componente separado y representa dicho componente solo si dataValid es verdadero
  2. O bien, dependiendo del enlace, puede pasar los argumentos condicionalmente. por ejemplo, en tu ejemplo:
 const contactForm = useDataForm(onSubmit, dataValid ? modelToForm(dataValid) : fallbackArg);
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda